<template>
    <view class="bottom-bar buy-bottom-bar">
        <view class="action">
            <view class="action-item home-item" @click="easyGoHome">
                <uni-icons type="shop" size="44" customIcons="icon-green"></uni-icons>
                <text>店铺</text>
            </view>
            <view class="action-item" @click="favoriteFn">
                <uni-icons
                    :type="IsFavorite == 1 ? 'star-filled' : 'star'"
                    :customIcons="IsFavorite == 1 ? 'icon-red' : ''"
                    size="44"></uni-icons>
                <text :class="IsFavorite == 1 ? 'text-red' : ''">收藏</text>
            </view>
        </view>
        <button class="btn btn-success" @click="buyNow">立即购买</button>
    </view>
</template>

<script>
import { mapGetters } from "vuex"
import { getCartTotal } from "@/utils/cartUtil.js"
export default {
    props: {
        IsFavorite: {
            type: Number,
            default: 0,
        },
    },
    data() {
        return {
            num: 0,
        }
    },
    mounted() {},
    methods: {
        //添加到购物车
        addCart() {
            this.$emit("addCart", "")
        },
        //立即购买
        buyNow() {
            this.$emit("buyNow", "")
        },
        //收藏
        favoriteFn() {
            this.$emit("favoriteFn", "")
        },
    },
}
</script>

<style lang="scss">
.buy-bottom-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;

    .action {
        display: flex;
        flex: 3;
        flex-direction: row;
        margin-right: 20rpx;

        .action-item {
            display: flex;
            flex: 1;
            flex-direction: column;
            justify-content: center;
            align-items: center;

            text {
                margin-top: 6rpx;
            }
        }

        .home-item {
            text {
                color: $app-color-main;
            }
        }

        .icon-cart {
            position: relative;
        }
    }

    .btn {
        flex: 4;
        border-radius: 100rpx;
    }
}
.text-red {
    color: $color-red;
}
</style>
